<template>
    <div class="userinfo">
        <div class="top">
            <p class="title"><span>首页</span> > 个人信息</p>
            <p class="changeinfo" @click="dialogVisible = true">修改信息</p>
        </div>
        <table class="infotable">
            <tr>
                <td>账号</td>
                <td>201810159206</td>
            </tr>
            <tr>
                <td>密码</td>
                <td>123456a</td>
            </tr>
            <tr>
                <td>姓名</td>
                <td>白泽</td>
            </tr>
            <tr>
                <td>性别</td>
                <td>女</td>
            </tr>
            <tr>
                <td>就学班级</td>
                <td>软工二班</td>
            </tr>
            <tr>
                <td>手机号</td>
                <td>12345678765</td>
            </tr>
        </table>

        <el-dialog
            v-model="dialogVisible"
            title="修改密码"
            width="30%"
            :before-close="handleClose"
        >
            <el-form
                label-position="top"
                label-width="100px"
                :model="form"
                class="myform"
                ref="myform"
                :rules="rules"
            >   
                    <el-form-item 
                        label="旧密码"
                        prop="oldpass"
                    >
                        <el-input clearable  v-model="form.oldpass" :prefix-icon="Lock"  
                        @blur="checkOldPass"
                        show-password type="password"  placeholder="请输入旧密码" />
                    </el-form-item>
                    <el-form-item 
                        label="新密码"
                        prop="newpass"

                    >
                        <el-input clearable @blur="checkDbNewPass" v-model="form.newpass" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入新密码" />
                    </el-form-item>
                    <el-form-item 
                        label="确认新密码"
                        prop="dbnewpass"
                    >
                        <el-input clearable v-model="form.dbnewpass" :prefix-icon="Lock"  show-password type="password"  placeholder="请确认新密码" />
                    </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="danger" @click="changePass"
                    >修改</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import {reg} from "@/utils/validate"
import {computed, reactive,toRefs,ref} from 'vue'
export default {
    setup(props) {
        const myform=ref()
        const state=reactive({
            dialogVisible:false,
            Lock,
            form:{},
            rules:{
                oldpass:[
                    {required: true, message: '密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                ],
                newpass:[
                    {required: true, message: '新密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                ],
                dbnewpass:[
                    {required: true, message: '确认密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    },
                    {
                        validator:checkDbPass,
                        message:'两次密码不一样',
                        trigger: 'blur'
                    }
                ],
            }
        })

        const dialogVisible = ref(false)

        const checkOldPass=(value,callback)=>{
            //检测旧密码是否正确
            
        }
        const changePass = ()=>{
            
        }
        const checkDbNewPass=()=>{

        }
        const checkDbPass = (rule,value,callback)=>{
            
        }

        const handleClose=()=>{
            state.dialogVisible=false 
        }

        return {
            dialogVisible,
            changePass,
            checkDbNewPass,
            checkOldPass,
            handleClose
        }

    }
}
</script>
<style lang="scss" scoped>
.userinfo{
    width: 100%;
    height:100%;
    .top{
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        .title{
            color: #999;
            font-size: 15px;
            span{
                color: #000;
                font-weight: bold;
            }
        }
        .changeinfo{
            color: rgb(63, 164, 208);
        }

    }
    .infotable{
        width: 300px;
        text-align: center;
        margin: 10px auto;
        background: #fff;
        border-radius: 10px;
        td{
            border-bottom: 1px solid #efefef;
            border-right: 1px solid #efefef;
            padding: 10px;
            color: #333;
            font-size: 14px;
        }
    }
}

    
</style>